<template>
  <div>
    <div class="top">
      <img src="../../assets/images/Mine/head.png">
      <p class="name">{{accountName}}</p>
      <p class="roleName">{{roleName}}</p>
      <p class="phone">Tel: {{phoneNumber}}</p>
    </div>
    <div class="main">
      <div v-for="(item, index) in dataList" :key="index" class="content-block contentDiv" @click="goTo(item.url)">
        <div class="item-icon" :class="'icon'+(index)"></div>
        <div class="item-name">{{ item.name }}</div>
        <icon name="arrow"/>
      </div>
      <!-- <div class="content-block quitBtn" @click='quit()'>退出</div> -->
    </div>
  </div>
</template>

<script>
import { Icon, Dialog } from 'vant'
import { loginOut, getUserInfo } from '@/api/user'

export default {
  name: 'overview',
  components: {
    Icon
  },
  data () {
    return {
      accountName: '',
      phoneNumber: '',
      roleName: '',
      dataList: [
        // {
        //   name: '修改密码',
        //   url: '/mine/changePassword'
        // },
        {
          name: '帮助反馈',
          url: '/mine/feedback'
        }
      ]
    }
  },
  mounted () {
    // this.accountName = sessionStorage.getItem('account')
    // this.phoneNumber = sessionStorage.getItem('mobile')
    // this.roleName = sessionStorage.getItem('roleName')
    console.log(sessionStorage.getItem('token'), 'sessionStorage.getItem')
    getUserInfo(sessionStorage.getItem('token')).then(res => {
       if (res.code === 0) {
        this.accountName = res.data.userName
        this.phoneNumber = res.data.mobile
        this.roleName = res.data.roleName
       }
    })
  },
  methods: {
    quit () {
      Dialog.confirm({
        message: '确定要退出吗？',
        theme: 'round-button'
      }).then(() => {
        loginOut().then((res) => {
          if (res.code === 0) {
            this.$base.delCookie('account')
            this.$base.delCookie('password')
            sessionStorage.setItem('token', '')
            this.$router.push('/login')
          }
        })
      })
        .catch(() => {
        })
    },
    goTo (url) {
      this.$router.push(url)
    }
  }
}
</script>

<style lang="scss" scoped>
  .top{
    margin-top: 20px;
    margin-left: 30px;
    img{
      float: left;
      width: 80px;
      margin-right: 15px;
    }
    .name{
      font-size: 22px;
      font-weight: 500;
      text-align: left;
      color: #ffffff;
    }
    .roleName{
      font-size: 16px;
      font-weight: 500;
      text-align: left;
      color: #ffffff;
    }
    .phone{
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      color: #ffffff;
      line-height: 34px;
    }
    @media screen and (max-width: 320px) {
      img{
        width: 68px;
      }
    }
  }
  .main{
    margin-top: 100px;
    .contentDiv{
      height: 10px;
      .item-name{
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #666666;
        line-height: 12px;
      }
      /deep/ .van-icon {
        position: absolute;
        right: 30px;
        transform: translate(0, -80%);
        font-size: 20px;
        color: #666666;
      }
    }
    .quitBtn{
      height: 10px;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      color: #666666;
      line-height: 12px;
      letter-spacing: 8px;
    }
  }

</style>
